<template>
    <div>
      <ly-dialog
        v-model="dialogVisible"
        :title="loadingTitle"
        width="560px"
        :before-close="handleClose"
      >
        <el-form
          :inline="false"
          :model="formData"
          :rules="rules"
          ref="rulesForm"
          label-position="right"
          label-width="130px"
        >
          <el-form-item label="所在城市：" prop="city">
            <el-input
              v-model.trim="formData.city"
              placeholder="请输入所在城市"
              style="width: 300px"
              :disabled="loadingTitle == '详情'"
            ></el-input>
          </el-form-item>
  
          <el-form-item label="所在区县：" prop="county">
            <el-input
              v-model.trim="formData.county"
              placeholder="请输入所在区县"
              style="width: 300px"
              :disabled="loadingTitle == '详情'"
            ></el-input>
          </el-form-item>
  
          <el-form-item label="学校名称：" prop="school_name">
            <el-input
              v-model.trim="formData.school_name"
              placeholder="请输入学校名称"
              style="width: 300px"
              :disabled="loadingTitle == '详情'"
            ></el-input>
          </el-form-item>
  
          <el-form-item label="学校类别：" prop="school_type">
            <el-input
              v-model.trim="formData.school_type"
              placeholder="请输入学校类别"
              style="width: 300px"
              :disabled="loadingTitle == '详情'"
            ></el-input>
          </el-form-item>
  
           
  
          <el-form-item label="学校人数：" prop="school_num">
            <el-input
              v-model.trim="formData.school_num"
              placeholder="请输入学校人数"
              style="width: 300px"
              :disabled="loadingTitle == '详情'"
            ></el-input>
          </el-form-item>
  
          <el-form-item label="班级个数：" prop="class_num">
            <el-input
              v-model.trim="formData.class_num"
              placeholder="请输入班级个数"
              style="width: 300px"
              :disabled="loadingTitle == '详情'"
            ></el-input>
          </el-form-item>
  
          <el-form-item label="教师个数：" prop="teacher_num">
            <el-input
              v-model.trim="formData.teacher_num"
              placeholder="请输入教师个数"
              style="width: 300px"
              :disabled="loadingTitle == '详情'"
            ></el-input>
          </el-form-item>
  
          <el-form-item label="学校负责人姓名" prop="director_name">
            <el-input
              v-model.trim="formData.director_name"
              placeholder="请输入学校该项目负责人姓名"
              style="width: 300px"
              :disabled="loadingTitle == '详情'"
            ></el-input>
          </el-form-item>
  
          <el-form-item label="学校负责人电话" prop="director_phone">
            <el-input
              v-model.trim="formData.director_phone"
              placeholder="请输入学校该项目负责人电话"
              style="width: 300px"
              :disabled="loadingTitle == '详情'"
            ></el-input>
          </el-form-item>
  
          <el-form-item label="职务" prop="job">
            <el-input
              v-model.trim="formData.job"
              placeholder="职务"
              style="width: 300px"
              :disabled="loadingTitle == '详情'"
            ></el-input>
          </el-form-item>
  
          <el-form-item label="在地工作人员名称" prop="user_name">
            <el-select
              v-model="formData.user_name"
              placeholder="请选择在地工作人员名称"
              clearable
              style="width: 300px"
              @change="search(1, $event)"
            >
              <el-option
                v-for="item in userIdList"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="线上工作人员名称" prop="user_name">
           
            <el-select
            style="width: 300px"
              v-model="formData.zxuser_name" 
              filterable
              remote
              placeholder="线上工作人员名称"
              :remote-method="remoteMethod"
              :loading="loading" 
              @change="search(5, $event)"
            >
              <el-option
                v-for="item in filteredZregIdLists"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item> -->
          <el-form-item label="线上区域负责人名称" prop="zxuser_name"  v-if="authority([2])">
            
            <el-select
           
            style="width: 300px"
              v-model="formData.zxuser_name" 
              filterable
              remote
              placeholder="线上区域负责人"
              :remote-method="remoteMethod"
              :loading="loading" 
              @change="search(6, $event)"
            >
              <el-option
                v-for="item in filteredZregIdLists"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="所属学校：" prop="school_id">
            <el-select
              v-model="formData.school_id"
              placeholder="所属学校"
              clearable
              style="width: 300px"
              @change="search(2, $event)">
              <el-option
                v-for="item in schoolList"
                :key="item.id"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item> -->
  
          <el-form-item label="年级：" prop="grade">
            <el-input
              v-model.trim="formData.grade"
              placeholder="请输入年级"
              style="width: 300px"
              :disabled="loadingTitle == '详情'"
            ></el-input>
          </el-form-item>
  
          <el-form-item label="学校班级：" prop="class_name">
            <el-input
              v-model.trim="formData.class_name"
              placeholder="请输入学校班级"
              style="width: 300px"
              :disabled="loadingTitle == '详情'"
            ></el-input>
          </el-form-item>
  
          <el-form-item label="班级课程：" prop="course">
            <el-input
              v-model.trim="formData.course"
              placeholder="请输入班级课程"
              style="width: 300px"
              :disabled="loadingTitle == '详情'"
            ></el-input>
          </el-form-item>
  
          <el-form-item label="第几节：" prop="some">
            <el-input
              v-model.trim="formData.some"
              placeholder="请输入第几节"
              style="width: 300px"
              :disabled="loadingTitle == '详情'"
            ></el-input>
          </el-form-item>
  
          <el-form-item label="周几：" prop="week">
            <el-input
              v-model.trim="formData.week"
              placeholder="请输入周一至周日"
              style="width: 300px"
              :disabled="loadingTitle == '详情'"
            ></el-input>
          </el-form-item>
  
          <el-form-item label="上课时间：" prop="tart_time">
            <el-input
              v-model.trim="formData.tart_time"
              placeholder="请输入上课时间"
              style="width: 300px"
              :disabled="loadingTitle == '详情'"></el-input>
          </el-form-item>
  
          <el-form-item label="下课时间:" prop="end_time">
            <el-input
              v-model.trim="formData.end_time"
              placeholder="请输入下课时间"
              style="width: 300px"
              :disabled="loadingTitle == '详情'"></el-input>
          </el-form-item>
  
          <el-form-item label="实际上课时间:" prop="num_time">
            <el-input
              v-model.trim="formData.num_time"
              placeholder="请输入实际上课时间"
              style="width: 300px"
              :disabled="loadingTitle == '详情'"></el-input>
  
            
          </el-form-item>
  
          <el-form-item label="在地老师名称:" prop="zuser_name">
            <el-input
              v-model.trim="formData.zuser_name"
              placeholder="请输入在地老师名称"
              style="width: 300px"
              :disabled="loadingTitle == '详情'"
            ></el-input>
          </el-form-item>
  
          <el-form-item label="联系电话:" prop="user_phone">
            <el-input
              v-model.trim="formData.user_phone"
              placeholder="请输入联系电话"
              style="width: 300px"
              :disabled="loadingTitle == '详情'"
            ></el-input>
          </el-form-item>
  
          <el-form-item label="班级规模:" prop="class_mode">
            <el-input
              v-model.trim="formData.class_mode"
              placeholder="请输入班级规模"
              style="width: 300px"
              :disabled="loadingTitle == '详情'"
            ></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="handleClose" :loading="loadingSave">取消</el-button>
          <el-button
            type="primary"
            @click="submitData"
            :loading="loadingSave"
            :disabled="loadingTitle == '详情'"
            >确定</el-button
          >
        </template>
      </ly-dialog>
    </div>
  </template>
    
    <script>
  import {
    schoolAdd,
    schoolUpdate,
    addressAreaRoot,
    schoolIdList,
    zregionuser
  } from "@/api/api";
  import { dayjs } from 'element-plus';
  import LyDialog from "@/components/dialog/dialog.vue";
  export default {
    emits: ["refreshData"],
    name: "addAdmin",
    components: { LyDialog },
    data() {
      return {
        filteredZregIdLists:[],
        dialogVisible: false,
        loadingSave: false,
        loadingTitle: "新增学校",
        userIdList: [],
        planList: [
          {
            value: "1",
            label: "待制定",
            id: "1",
          },
          {
            value: "2",
            label: "已制定",
            id: "2",
          },
        ],
        inSchoolPlan: [
          {
            value: "1",
            label: "待审核",
            id: "1",
          },
          {
            value: "2",
            label: "已审核",
            id: "2",
          },
        ],
        isStatusList: [
          {
            value: "1",
            label: "未排课",
            id: "1",
          },
          {
            value: "2",
            label: "已排课",
            id: "2",
          },
        ],
        formData: {
          city: "", // 所在城市
          county: "", // 所在区县
          school_name: "", // 学校名称
          school_type: "", // 学校类别
          school_level: "", // 学校级别
        },
        rules: {
          city: [{ required: true, message: "请输入所在城市", trigger: "blur" }],
          county: [
            { required: true, message: "请输入所在区县", trigger: "blur" },
          ],
          school_name: [
            { required: true, message: "请输入学校名称", trigger: "blur" },
          ],
          school_type: [
            { required: true, message: "请输入学校类别", trigger: "blur" },
          ],
          school_level: [
            { required: true, message: "请输入学校级别", trigger: "blur" },
          ],
          school_num: [
            { required: true, message: "请输入学校人数", trigger: "blur" },
          ],
          class_num: [
            { required: true, message: "请输入班级个数", trigger: "blur" },
          ],
          teacher_num: [
            { required: true, message: "请输入教师个数", trigger: "blur" },
          ],
          director_name: [
            { required: true, message: "请输入学校负责人姓名", trigger: "blur" },
          ],
          director_phone: [
            { required: true, message: "请输入学校负责人电话", trigger: "blur" },
          ],
          job: [{ required: true, message: "请输入职务", trigger: "blur" }],
          user_name: [
            { required: true, message: "选择在地工作人员", trigger: "change" },
          ],
          zxuser_name: [
            { required: true, message: "选择在线区域负责人", trigger: "change" },
          ],
          grade: [{ required: true, message: "请输入年级", trigger: "blur" }],
          class_name: [
            { required: true, message: "请输入学校班级", trigger: "blur" },
          ],
          course: [
            { required: true, message: "请输入班级课程", trigger: "blur" },
          ],
          some: [{ required: true, message: "请输入第几节", trigger: "blur" }],
          week: [{ required: true, message: "请输入周几", trigger: "blur" }],
          tart_time: [
            { required: true, message: "请输入上课时间", trigger: "change" },
          ],
          end_time: [
            { required: true, message: "请输入下课时间", trigger: "change" },
          ],
          num_time: [
            { required: true, message: "请输入实际上课时间", trigger: "blur" },
          ],
          zuser_name: [
            { required: true, message: "请输入在地老师名称", trigger: "blur" },
          ],
          user_phone: [
            { required: true, message: "请输入联系电话", trigger: "blur" },
          ],
          class_mode: [
            { required: true, message: "请输入班级规模", trigger: "blur" },
          ],
        },
        GroupList: [], //管理员分组列表
        zregIdList:[],//在线管理员
        AreaRootList: [], //区域列表获取
        passwordSwitch: false, //是否修改密码
        linePlanList: [
          {
            value: "1",
            label: "是",
            id: "1",
          },
          {
            value: "2",
            label: "否",
            id: "2",
          },
        ],
        loading:false
      };
    },
    
    methods: {
      authority(groupArr = [0]) {
        // 权限筛选
        let userInfo = this.userInfo;
        // 当前权限和传来的权限组进行对比
        if (groupArr.some((item) => Number(item) === userInfo)) return true;
        return false;
      },
      // 在线工作人员搜索
      remoteMethod(query) {
        const that = this;
        console.log(query, "query");
        
        if (query) {
          this.loading = true;
          
          // 模拟异步操作
          setTimeout(() => {
            that.loading = false;
            that.filteredZregIdLists = that.zregIdList.filter((item) => {
              console.log(item.label.includes(query), '------that.zregIdList');
              return item.label.toLowerCase().includes(query.toLowerCase());
            });
            console.log(that.filteredZregIdLists, '-------filteredZregIdLists');
          }, 200);
        } else {
          that.filteredZregIdLists = [];
          that.loading = false;
        }
      },
      search(i, e) {
        console.log(i, e, '---------search')
        if (i === 1){
   // 在地工作人员筛选
   this.formData.user_id = this.userIdList.find(
            (item) => item.value == e
          ).value;
          this.formData.user_name= this.userIdList.find(
            (item) => item.value == e
          ).label;
        }
         
        if (i === 2){
          this.formData.instrument = this.linePlanList.find(
            (item) => item.value == e
          ).value;
        }
          
        if (i === 3){
          this.formData.state = this.inSchoolPlan.find(
            (item) => item.value == e
          ).value;
        }
          
        if (i === 4){
          this.formData.is_status = this.isStatusList.find(
            (item) => item.value == e
          ).value;
         
        }
        if (i === 5){
   // 线上区域负责人选择
   this.formData.zxuser_id = this.zregIdList.find(
            (item) => item.value == e
          ).value; 
          this.formData.zxuser_name = this.zregIdList.find(
            (item) => item.value == e
          ).label; 
        }
          if (i === 6){
   // 线上区域负责人选择--这个才是
   this.formData.zxuser_id = this.zregIdList.find(
            (item) => item.value == e
          ).value; 
          this.formData.zxuser_name = this.zregIdList.find(
            (item) => item.value == e
          ).label; 
        }
          
      },
      getData(e) {
        this.formData.status = e;
      },
      handleClose() {
        this.dialogVisible = false;
        this.loadingSave = false;
        this.formData = {};
        this.passwordSwitch = false;
        this.$emit("refreshData");
      },
      addModuleFn(item, flag, GroupList) {
        this.loadingTitle = flag;
        this.dialogVisible = true;
        console.log(GroupList,'---------GroupList')
        schoolIdList().then((res) => {
          this.userIdList = res.data.map((item) => {
            return {
              value: item.id,
              label: item.username,
            };
          });
        });
        zregionuser().then((res) => {
          this.zregIdList = res.data.map((item) => {
            return {
              value: item.id,
              label: item.username,
            };
          }); 
        });
        if (!this.GroupList&&!this.GroupList.length) this.GroupList = GroupList;
        if (item) {
          this.formData = item;
          this.formData.status = Number(this.formData.status);
        }
      },
  
      submitDataOne() {
        let vm = this;
  
        this.$refs["rulesForm"].validate((obj) => {
          if (obj) {
            this.loadingSave = true;
  
            if (vm.passwordSwitch && vm.formData.passwordEdit) {
              // 有修改密码 修改函数和原始密码函数替换 删除修改的函数
              vm.formData.password = vm.formData.passwordEdit;
              delete vm.formData.passwordEdit;
            }
            let param = {
              ...this.formData,
            };
            Object.assign(param, { ["status_text"]: undefined });
            
            if (this.formData.id) {
              param.status=1;
              param.is_status=1
  
              schoolUpdate(param).then((res) => {
                this.loadingSave = false;
                if (res.code == 1) {
                  this.$message.success(res.msg);
                  this.handleClose();
                  this.$emit("refreshData");
                } else {
                  this.$message.warning(res.msg);
                }
              });
            } else {
              param.status=1;
              param.is_status=1
              schoolAdd(param).then((res) => {
                this.loadingSave = false;
                if (res.code == 1) {
                  this.$message.success(res.msg);
                  this.handleClose();
                  this.$emit("refreshData", 1);
                } else {
                  this.$message.warning(res.msg);
                }
              });
            }
          }
        });
      },
      submitData() {
        let vm = this;
        if (vm.passwordSwitch && vm.formData.passwordEdit) {
          vm.$confirm("您修改了改用户的原始密码，您确定要进行密码修改吗?", {
            closeOnClickModal: false,
          })
            .then((res) => {
              vm.submitDataOne();
            })
            .catch(() => {});
        } else {
          vm.submitDataOne();
        }
      },
      imgBeforeUpload(file) {
        const isJPG = file.type === "image/jpeg" || file.type === "image/png";
        if (!isJPG) {
          this.$message.error("图片只能是 JPG/PNG 格式!");
          return false;
        }
        return isJPG;
      },
      // async imgUploadRequest(param) {
      //     var vm = this
      //     let obj= await platformsettingsUploadPlatformImg(param)
      //     if(obj.code == 1) {
      //         let res=''
      //         if (obj.data.data[0].indexOf("://")>=0){
      //             res = obj.data.data[0]
  
      //         }else{
      //             res = url.split('/api')[0]+obj.data.data[0]
      //         }
      //         vm.formData.default_image = res
      //     } else {
      //         vm.$message.warning(res.msg)
      //     }
      // },
      imgUploadSuccess(res) {
        // if (res) {
        //     this.formData.image = res.url
        // }
      },
      getAreaRoot() {
        // 地区列表获取
        let objs = {
          page: 1,
          per_page: 999, //设置最长数据
        };
        addressAreaRoot(objs).then((res) => {
          if (res.code == 1) {
            console.log(res, "数据获取成功------------");
            this.AreaRootList = res.data.data;
          }
        });
      },
    },
    mounted() {
      console.log("开始获取，‘-----------", this.refreshData);
      //this.getAreaRoot();
    },
  };
  </script>
    <style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 128px;
    height: 128px;
    line-height: 128px;
    text-align: center;
  }
  
  .avatar {
    width: 128px;
    height: 128px;
    display: block;
  }
  </style>
    